<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>身材计算</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/mui.picker.css" />
		<link rel="stylesheet" type="text/css" href="../css/mui.poppicker.css" />
		<!--引入公用样式-->
		<link rel="stylesheet" type="text/css" href="../css/public.css" />
	</head>

	<body class="dp-n" id="body">
		<header class="mui-bar mui-bar-nav titleBar-bgcolor" id="header">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left c-ff"></a>
			<h1 class="mui-title titleBar-color">身材计算</h1>
		</header>
		<!--这里面是content页面-->
		<div class="mui-content">
			<!--头部搜索框-->
			<div class="header-search bs-bb">
				<div class="header-title">
					<span class="c-a3 bdFontSize">请选择您的身材</span>
				</div>
				<!--搜索框-->
				<div class="header-inp ">
					<!--身高-->
					<div class="mui-row">
						<div class="mui-col-xs-2 figure-box bd-n">
							<span class="ttFontSize c-a3">身高</span>
						</div>
						<div class="mui-col-xs-2 heightimg">
						</div>
						<div class="mui-col-xs-8 figure-box" id="ratelbox">
							<input type="text" class="bdFontSize inputstyle" placeholder="厘米" id="height" />
						</div>
					</div>
					<!--体重-->
					<div class="mui-row" style="margin-top:10px;">
						<div class="mui-col-xs-2 figure-box bd-n">
							<span class="bdFontSize c-a3">体重</span>
						</div>
						<div class="mui-col-xs-2 weightimg">
						</div>
						<div class="mui-col-xs-8 figure-box" id="raterbox">
							<input type="text" class="bdFontSize inputstyle" placeholder="公斤" id="weight" />
						</div>
					</div>
				</div>
				<!--确认按键-->
				<div class="header-btn">
					<button class="bdFontSize c-ff" id="btn">确&nbsp;&nbsp;&nbsp;&nbsp;认</button>
				</div>
			</div>
			<!--显示内容区域-->
			<div class="content bs-bb dp-n" id="results">
				<!--<div class="content-tt bs-bb">
					<span class="ttFontSize c-a3">测试结果</span>
				</div>-->
				<!---->
				<div class="content-list c-a3 listFontSize mui-row ta-c">
					<img src="" alt="" class="resulteimg" id="imgxx"/>
				</div>
				<!---->
				<div class="content-list c-a3 listFontSize mui-row">
					<div class="mui-col-xs-3">
						<span>测试结果：</span>
					</div>
					<div class="mui-col-xs-9">
						<span id="bankname"></span>
					</div>
				</div>
				<!---->
				<div class="content-list c-a3 listFontSize mui-row">
					<div class="mui-col-xs-3">
						<span>理想体重：</span>
					</div>
					<div class="mui-col-xs-9">
						<span id="banktype"></span>
					</div>
				</div>
				<!---->
				<div class="content-list c-a3 listFontSize mui-row">
					<div class="mui-col-xs-3">
						<span>BMI：</span>
					</div>
					<div class="mui-col-xs-9">
						<span id="BMI"></span>
					</div>
				</div>
			</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/immersed.js"></script>
		<script src="../js/mui.picker.js"></script>
		<script src="../js/mui.poppicker.js"></script>
		<script type="text/javascript">
			mui.init();
			mui.plusReady(function() {
				plus.nativeUI.showWaiting("加载中...");
				var topoffset = '45px';
				if(plus.navigator.isImmersedStatusbar()) {
					topoffset = (Math.round(plus.navigator.getStatusbarHeight()) + 45) + 'px';
				}
				document.getElementById('header').style.height = (immersed + 44) + 'px';
				document.querySelector('.mui-content').style.marginTop = (immersed) + 'px';
				plus.nativeUI.closeWaiting();
				document.getElementById("body").className = "";
				//判断数据
				document.getElementById('btn').addEventListener('tap', function(event) {
					//获取用户名
					var a = document.getElementById('height').value;
					var b = document.getElementById('weight').value;
					if(a == '' || b == ''){
						plus.nativeUI.toast("请输入身高体重！");
						return;
					}
					if(!isNaN(a) && !isNaN(b)) {
						var bmi = eval(document.getElementById('BMI').value);
						var bmiValue = BMI.getBMI(a, b);
						BMI.disp_alert(bmiValue);
						document.getElementById('banktype').innerText = BMI.idealweight(a);
						document.getElementById('BMI').innerText = bmiValue;
						document.getElementById("results").className = "content bs-bb";
					} else {
						plus.nativeUI.toast("请正确输入！");
					}

				})
			})
			var BMI = {};
			BMI.getBMI = function(a, b) {
				var bmi = b / ((a / 100) * (a / 100));
				return bmi;
			};
			BMI.idealweight = function(a) {
				var x = (a - 100) * 0.9;
				return x;
			};
			BMI.disp_alert = function(bmi) {
				if(bmi < 18.5) {
					document.getElementById('bankname').innerText = "你的体重太轻,要多吃点哟!";
					document.getElementById('imgxx').setAttribute("src",'../images/bq1.gif')
					
				} else if(bmi >= 18.5 && bmi < 25) {
					document.getElementById('bankname').innerText = "亲,你的体重正常,要继续保持哟!";
					document.getElementById('imgxx').setAttribute("src",'../images/bq2.gif')
				} else if(bmi >= 25 && bmi < 30) {
					document.getElementById('bankname').innerText = "亲,您的体重过重,要减肥了!";
					document.getElementById('imgxx').setAttribute("src",'../images/bq4.gif')
				} else {
					document.getElementById('bankname').innerText = "亲,你确实要减肥了!";
					document.getElementById('imgxx').setAttribute("src",'../images/bq1.png')
				}
			}
			//重写back
			var oldBack = mui.back;
			mui.back = function() {
				document.getElementById("results").className = "content bs-bb dp-n";
				document.getElementById('height').value = "";
				document.getElementById('weight').value = "";
				oldBack();
			};
		</script>
	</body>

</html>